<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./main.css">
	<title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor); height: fit-content;">

	<div id="app">
 
		<ui5-title>AI Pattern / Level 2</ui5-title>
		
		<ui5-panel id="myPanel" fixed>
			<div id="panelContent">
				<div id="panelContentFirstRow">
					<ui5-avatar size="XS">
						<img src="../assets/images/avatars/woman_avatar_1.png" alt="Woman image">
					</ui5-avatar>
					<ui5-ai-prompt-input id="promptInput" show-clear-icon placeholder="Ask me anything..." label="User prompt:" show-exceeded-text></ui5-ai-prompt-input>
				</div>
	
				<ui5-toolbar align-content="Start">
					<ui5-toolbar-button icon="doc-attachment" text="Attach file"></ui5-toolbar-button>
					<ui5-toolbar-button icon="background" text="Add image"></ui5-toolbar-button>
					<ui5-toolbar-button icon="sound-loud" text="Insert audio"></ui5-toolbar-button>
					<ui5-toolbar-separator></ui5-toolbar-separator>
					<ui5-toolbar-button icon="history" text="History"></ui5-toolbar-button>
					<ui5-toolbar-button icon="favorite" text="Favorite prompts"></ui5-toolbar-button>
				</ui5-toolbar>
			</div>
		</ui5-panel>
	
	</div>

	<!-- playground-fold -->
	<script type="module" src="main.js"></script>
</body>
	
</html>
<!-- playground-fold-end -->